<template>
	<view class="load-more-packbox text-center">
		<view class="" style="height: 100rpx;" v-if="loading">
			<view class="load-view flex justify-content-center items-center relative" style="width: 100%;height: 100%;">
				<view class="load-circle"></view>
			</view>
		</view>
		<view v-if="showLoadendTxt">
			<view class="font-hanserif-bold flex flex-all-center" v-if="!loading"> ~~~ 客官，飞到天边了 ~~~ </view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "comLoadMore",
		props: {
			showLoadendTxt: {
				type: Boolean,
				default: () => false
			},
			loading: {
				type: Boolean,
				default: () => true
			},
		},
		data() {
			return {

			};
		},

	}
</script>

<style lang="scss" scoped>
	.load-circle,
	.load-circle:before,
	.load-circle:after {
		width: 2em;
		height: 2em;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation: loadAni 1.6s infinite ease-in-out;
		animation: loadAni 1.6s infinite ease-in-out;
		border-radius: 100%;
	}
	
	.load-circle {
		margin: 10px auto;
		position: relative;
		text-indent: -9999em;
		transform: translateZ(0);
		animation-delay: -0.16s;
		transform: translateY(-2.1em) scale(0.7);
		font-size: 22rpx;
	}
	
	.load-circle:before,
	.load-circle:after {
		content: '';
		position: absolute;
		top: 0;
	}
	
	.load-circle:before {
		left: -3.6em;
		animation-delay: -0.32s;
	}
	
	.load-circle:after {
		left: 3.6em;
	}
	
	@keyframes loadAni {
		0%,
		80%,
		100% {
			box-shadow: 0 2.1em 0 -1.4em;
		}
	
		40% {
			box-shadow: 0 2.1em 0 0;
		}
	}
	
	.load-more-packbox {
		color: #FFF;
	}
	
	.load-more-packbox .status {
		border: 0;
		background-color: transparent !important;
	}

	.load-more-packbox .status::after {
		content: "";
		display: none;
	}
	
	.load-view {
		opacity: 0.78;
		font-size: 22rpx;
	}
</style>
